<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <h3>{{num}}</h3>
    <hr/>
    <zhang></zhang>
    <hr/>
    <my-user></my-user>
    <hr/>
    <goods-list></goods-list>
    <goods-list></goods-list>
    <goods-list></goods-list>
    <goods-list></goods-list>
    <goods-list></goods-list>
    <goods-list></goods-list>
    <goods-list></goods-list>
</div>
</body>
<script>
	new Vue({
		el: "#root",
        data:{
			num:10
        },
        components:{
			// 组件是对HTML标签的一个扩展。
			// 声明组件
            // 1- 声明局部组件的选项是components
            // 2- components的类型是一个对象
            // 3- 对象的属性名即是组件的名字。
            // 规范：
            // 1- 将组件的名字全部小写，多个单词之间使用-分割。
            // 2- 首字母大写（大驼峰命名），在使用时全部小写，多个单词之间-分割
            zhang:{
				// 组件呈现的内容
                template:`
                    <h3>组件zhang</h3>
                `
            },
            // <my-user>
            "my-user":{
				template:`<h3>myUser</h3>`
            },
            GoodsList:{
				template:(`
				    <h3>goodsList</h3>
				`)
            }
        },
        methods:{
			// 声明函数
        },
        filters:{
			// 声明过滤器
        },
        computed:{
			// 声明计算属性
        }
        // 指定模板
        // template:``
	})
</script>
</html>